<template>
    <div style="position:relative;height:100%" class="flex flex-v">
        <Spin size="large" fix v-if="submitting">
        </Spin>
        <header class="header">
            <a class="btn-back" v-if="isView" @click="prev"><i class="icon icon-left"></i>返回</a>
            <a class="btn-back" v-if="!isView" @click="back"><i class="icon icon-left"></i>返回</a>
            <a class="btn-save" v-if="isView" @click="handleSave"><i class="am-icon-save"></i>保存</a>
            <a class="btn-save" v-else @click="handleNew"><i class="am-icon-plus"></i>添加</a>
            <h1 v-html="getTitle"></h1>
        </header>
        <div class="flex1" style="overflow:auto">
            <transition enter-active-class="anim fadeInRight" leave-active-class="anim fadeOutRight">
                <div class="page" v-show="!isView">
                    <pull ref="pull" @onpull="handlePull" :count="count">
                        <div class="input-search"><a class="am-icon-search" @click="handlePull"></a><input ref="keyword" type="text" placeholder="搜索" autocomplete="off" v-model="keyword"></div>
                        <ul class="list p-list">
                            <li v-for="item in datas" :key="item.Id" @click="showProduct(item)">
                                <img :src="item.Photo" />
                                <div>
                                    <p class="am-text-truncate">{{item.Name}}</p>
                                    <p class="sub">{{item.Price}}元</p>
                                </div>
                                <i class="icon icon-right"></i>
                            </li>
                        </ul>
                    </pull>   
                </div>
            </transition>
            <transition enter-active-class="anim fadeInRight" leave-active-class="anim fadeOutLeft">
                <div v-if="isView" class="flex1" style="overflow:auto">
                    <div class="page" style="padding:10px;position:relative;">
                        <h3 v-if="item==null" class="am-text-center">
                            <i class="am-icon-spinner am-icon-pulse am-margin-top-xl"></i> 正在加载...
                        </h3>
                        <Card v-else style="margin-bottom:10px;">
                            <template slot="title_top">
                                产品详细
                            </template>
                            <i-form ref="form" v-model="submitting" class="am-form-h" :action="submitUrl" @success="handleSuccess">
                                <input type="hidden" name="Id" />
                                <form-item label="产品类别" :required="true">
                                    <i-select name="SortId" :options="sortTypes" required></i-select>
                                </form-item>
                                <form-item label="产品名称" :required="true">
                                    <input type="text" name="Name" required />
                                </form-item>
                                <form-item label="产品缩略图" :required="true">
                                    <Upload name="Photo" :format="['png','jpg']" :max-size="4096" :min="1" :max="1" required>
                                        <div slot="tip" class="tooltip-text">大小为：220*220像素</div>
                                    </Upload>
                                </form-item>
                                <form-item label="产品展示图">
                                    <Upload name="Images" :format="['png','jpg','mp4']" :max-size="51200" :min="1" :max="10">
                                        <div slot="tip" class="tooltip-text">大小为：600*200像素</div>
                                    </Upload>
                                </form-item>
                                <form-item label="参考价格">
                                    <input type="text" name="Price" />
                                </form-item>
                                <form-item label="所属季节">
                                    <i-select name="Seasons" multiple :options="seasons" placeholder="请选择季节" :closeOnSelect="false"></i-select>
                                </form-item>
                                <form-item label="品牌">
                                    <input type="text" name="Brand" />
                                </form-item>
                                <form-item label="产地">
                                    <input type="text" name="Place" />
                                </form-item>
                                <form-item label="产品标签">
                                    <i-select name="Tags" :options="tags" taggable multiple style="width:100%" placeholder="请选择或输入标签..." :closeOnSelect="false"></i-select>
                                </form-item>
                                <form-item label="产品标识">
                                    <i-select name="Flags" multiple="" :options="flags" style="width:100%" placeholder="请选择标识..." :closeOnSelect="false"></i-select>
                                </form-item>
                                <form-item label="产品备注">
                                    <textarea type="text" name="Remark" rows="2"></textarea>
                                </form-item>
                                <form-item label="产品介绍">
                                    <editor name="Intro"></editor>
                                </form-item>
                            </i-form>
                        </Card>
                        <Card v-if="item&&item.Id">
                            <template slot="title_top">
                                <Icon type="cube"></Icon>产品规格
                            </template>
                            <template slot="title_top_extra">
                                <a class="am-icon-plus" @click="addProductShow">添加</a>
                            </template>
                            <ul class="list ps-list">
                                <li v-for="item in item.List" :key="item.Id" @click="showProductInfo(item)">
                                    <i class="icon icon-right"></i>
                                    <div class="am-g">
                                        <div class="am-u-sm-8 am-padding-0">
                                            {{item.Spec}}
                                            <p>{{item.Price}}元 (参考价：{{item.ReferencePrice}}元)</p>
                                        </div>
                                        <div class="am-u-sm-4 am-text-right">
                                            <p>剩余：{{item.Amount}}</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </Card>
                        <div v-if="showDel" class="flex1 am-padding-left-xs am-padding-right-xs am-margin-bottom-lg" style="margin-top:20px;text-align:center">
                            <button class="am-btn am-btn-danger am-btn-block am-radius" @click="delItem" style="width:80%;display:inline-block">删除</button>
                        </div>
                        <Modal v-model="isProductShow" title="产品规格" @on-ok="handlePsSave">
                            <i-form ref="psForm" v-model="submitting" class="am-form-h" :action="productShowUrl" @success="handlePsSuccess" :show-progress="false">
                                <input type="hidden" name="Id" value="" />
                                <input type="hidden" name="productId" :value="item&&item.Id" />
                                <form-item label="规格">
                                    <input type="text" name="Spec" value="" required="" />
                                </form-item>
                                <form-item label="价格">
                                    <input type="number" name="Price" value="0.00" step="0.01" required="" />
                                </form-item>
                                <form-item label="参考价">
                                    <input type="number" name="ReferencePrice" value="0.00" step="0.01" required="" />
                                </form-item>
                                <form-item label="剩余数量">
                                    <input type="number" name="Amount" value="" required="" />
                                </form-item>
                                <form-item label="折扣">
                                    <input type="number" name="Discount" value="1" step="0.01" min="0.1" max="1" required="" />
                                </form-item>
                                <!--<form-item label="颜色">
                                    <input type="text" name="Color" />
                                </form-item>-->
                                <form-item label="备注">
                                    <textarea name="Remark" rows="2"></textarea>
                                </form-item>
                            </i-form>
                        </Modal>
                    </div>
                </div>
            </transition>
        </div>      
    </div>
</template>
<script>
    import pull from 'components/pull';
    import { getDatas, getInfo, getSortType, rootUrl, del } from 'api/erp';

    export default {
        components: { pull },
        data() {
            return {
                seasons: [],
                keyword: '',
                submitting: false,
                submitUrl: rootUrl + 'product/save',
                productShowUrl: rootUrl + 'productshow/save',
                isView: false,
                item:null,
                datas:[],
                count: 0,
                sortTypes:[],
                flags: [],
                tags: [],
                isProductShow:false,
                productShowItem:null,
                isEdit:false,
                showDel:false
            }
        },
        computed: {
            getTitle() {
                if (this.isView) {
                    if (this.item && this.item.Name)
                        return this.item.Name;
                    else
                        return '添加产品';
                }
                return '产品列表';
            }
        },
        watch: {
            keyword(val) {
                this.hanldeSearch();
            }
        },
        methods: {
            hanldeSearch() {
                if (this.$timer) {
                    clearTimeout(this.$timer);
                    this.$timer = null;
                }
                let self = this;
                this.$timer = setTimeout(function() {
                    self.$timer = null;
                    self.handlePull();
                },500);
            },
            prev() {
                if(this.isProductShow){
                    this.isProductShow = false;
                    this.showDel = true;
                }
                else{
                    this.item = null;
                    this.isView = false;
                
                    this.isEdit = false;
                    this.showDel = false;
                }
            },
            async showProduct(item) {
                let result = await getInfo('product', item.Id);
                if (result.succ) {
                    this.item = result.data;
                    if (this.item.StartDate)
                        this.dateRange = [this.item.StartDate, this.item.EndDate];
                    this.isEdit = true;
                    this.isView = true;
                    this.showDel = true;
                    this.$nextTick(function () {
                        this.$refs.form.fill(this.item);
                    });
                }
                else
                    this.$Message.error(result.data);
            },
            showProductInfo(item) {
                this.productShowItem = item;
                this.isEdit = true;
                this.isProductShow = true;
                this.showDel = true;
                this.$nextTick(function () {
                    this.$refs.psForm.fill(item);
                });
            },
            handleNew() {
                this.isEdit = false;
                this.isView = true;
                this.item = {};
                this.showDel = false;
                this.$refs.form.reset();
            },
            handleSave() {
                 this.$refs.form.submit();
            },
            handleSuccess(data) {
                this.item = data;
                this.$Message.success('保存成功！');
            },
            handlePsSave() {
                this.$refs.psForm.submit();
            },
            handlePsSuccess(result) {
                this.$Message.success('保存成功！');
                if (this.productShowItem) {
                    for (var item in this.productShowItem) {
                        this.productShowItem[item] = result[item];
                    }
                } else {
                    this.item.List.push(result);
                }
                this.$refs.psForm.reset();
            },
            async loadData(page, cb) {
                try {
                    let result = await getDatas('product', page, this.$refs.keyword.value);
                    if (result.succ) {
                        if (page > 0)
                            this.datas = this.datas.concat(result.data.datas);
                        else
                            this.datas = result.data.datas;
                        if (cb) cb(result.data.haveMore);
                        this.count = result.data.count;
                    } else {
                        if (cb) cb(true);
                        this.count = 0;
                        this.$Message.error(result.data);
                    }

                } catch (error) {
                    console.log(error)
                }
            },
            handlePull(config) {
                if (!config) {
                    let self = this;
                    config = {page:this.$refs.pull.page, cb:function(haveMore) {
                        self.$refs.pull.loadMore = haveMore;
                    }};
                }
                this.loadData(config.page, config.cb);
            },
            addProductShow() {
                this.$refs.psForm.reset();
                this.productShowItem = null;
                this.isProductShow = true;
            },
            delItem(){
                var self = this;
                if(confirm("确认删除该产品？")){
                    var id = self.isProductShow ? self.productShowItem.Id : '';
                    let result = del('product', id,self.item.Id);
                    if(result){
                        self.item = null;
                        self.productShowItem = null;
                        self.isView = false;
                        self.isProductShow = false;
                        self.isEdit = false;
                    }
                }
            }
        },
        async created() {
            for (var i = 1; i <= 12; i++) {
                this.seasons.push({ id: i, text: i + '月' });
            }
            let result = await getSortType();
            this.sortTypes = result.Codes;
            this.flags = result.ProductFlags;
            this.handlePull();
        }
    }
</script>
<style>
    html, body, .container { height:100%; overflow:hidden } .p-list.chk{position:absolute}
</style>
